<template>
  <div>
    <div class="app-page">
      <table-search :search-form="queryFormItem" :on-submit="handleQuery">
        <div slot="new-add-button" style="line-height:45px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
          >
            创建业务
          </el-button>
        </div>
      </table-search>
    </div>
    <el-card class="table">
      <TablePaging
        :table-list="deviceList"
        border
        :table-column="deviceTableColumn"
        :table-buttons="deviceTableButtons"
        :table-btn-width="180"
        :table-paging="deviceTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
    <BusinessUpdate ref="BusinessUpdateRef" />
  </div>
</template>
<script>
import { basinessFindPage, fetchBusinessStatusUpdate } from '@/api/basiness'
import { TableSearch, TablePaging } from '@/components'
import BusinessUpdate from './update'
import { queryFormItem, tableColumn } from './config'

export default {
  name: 'BusinesssList',
  components: { TableSearch, BusinessUpdate, TablePaging },
  data() {
    return {
      queryFormData: {},
      queryFormItem,
      deviceTableColumn: tableColumn(this.handleTrigger, this.handleFeedback),
      deviceList: [{ name: 'aaa' }],
      deviceTableButtons: [
        {
          name: '编辑',
          click: this.handleEdit
        },
        {
          name: '删除',
          confirm: '确认删除吗 ?',
          click: this.handleDelete
        },
        {
          name: this.parseStatus,
          confirm: records => '确定' + this.parseStatus(records) + '吗 ?',
          click: this.handleStatusChange
        }
      ],
      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created() {
    // this.postFindPage()
  },
  methods: {
    handleTrigger(row) {
      // 平台触发
      console.log(row)
    },
    handleFeedback(row) {
      // 执行反馈
      console.log(row)
    },
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },
    parseStatus(records) {
      if (records.row.status === 1 || records.row.status === 3) {
        return '启用'
      }
      if (records.row.status === 2) {
        return '停用'
      }
    },
    handleAdd() {
      // 新增
      this.$refs.BusinessUpdateRef.open()
    },
    handleEdit(id) {
      // 修改
      this.$refs.BusinessUpdateRef.open(id)
    },
    handleDelete(id) {
      this.postDeviceDelete(id)
    },
    handleStatusChange(id) {
      const current = this.$data.deviceList.find(e => e.id === id)

      let status = null

      // 1=未开始 2=进行中 3=已停用
      if (current.status === 1 || current.status === 3) {
        status = 2
      } else if (current.status === 2) {
        status = 3
      }

      this.postStatusChange({ id, status })
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },

    postFindPage() {
      // 获取列表
      basinessFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postStatusChange(params) {
      fetchBusinessStatusUpdate(params).then(res => {
        this.$message({ type: 'success', message: '修改成功' })
        this.postFindPage()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-page {
  min-height: 0;
}
.table {
  margin-top: 20px;
}
</style>
